<template>
  <div class="app-container">
    <div v-if="!detailOpen">
      <div class="select">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="执行中" name="execution">
            <div slot="label" class="tab-label-container">
              <div class="tab-label-title">执行中 ({{ execution }})</div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="待盖章" name="waitStamp">
            <div slot="label" class="tab-label-container">
              <div class="tab-label-title">待盖章 ({{ waitStamp }})</div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="待领取" name="waitReceive">
            <div slot="label" class="tab-label-container">
              <div class="tab-label-title">待领取 ({{ waitReceive }})</div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="即将到期" name="willExpired">
            <div slot="label" class="tab-label-container">
              <div class="tab-label-title">即将到期 ({{ willExpired }})</div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="已到期" name="expired">
            <div slot="label" class="tab-label-container">
              <div class="tab-label-title">已到期 ({{ expired }})</div>
            </div>
          </el-tab-pane>
        </el-tabs>
        <el-form
          :model="queryParams"
          ref="queryForm"
          :inline="true"
          class="query-form"
        >
          <el-form-item label="">
            <el-input
              v-model="queryParams.employeeCode"
              placeholder="支持姓名、工号、手机号搜索"
              clearable
              size="small"
              @keyup.enter.native="searchMethod"
            >
            <i slot="suffix" class="el-input__icon el-icon-search"></i>
            </el-input>
          </el-form-item>
          <el-form-item>
            <!-- <el-button type="primary" size="mini" @click="searchMethod">搜索</el-button> -->
            <el-button size="mini" @click="resetQuery">导出</el-button>
            <el-button
              type="primary"
              @click="add()"
              size="mini"
              v-hasPermi="['employee:contract:add']"
              >添加合同/协议</el-button
            >
          </el-form-item>
        </el-form>
      </div>

      <el-table
        ref="singleTable"
        :data="tableData"
        highlight-current-row
        style="width: 100%"
      >
        <el-table-column
          type="index"
          label="序号"
          width="50"
          align="center"
        ></el-table-column>
        <el-table-column
          v-for="(val, index) in bindTableColumns"
          :key="val.prop"
          :label="val.label"
          :sortable="val.sortable"
          align="center"
          :width="val.width"
        >
          <template slot-scope="scope">
            <el-button
              v-if="val.label === '附件'"
              @click="downloadAllFiles(scope.row.employeeContractId, null)"
              type="text"
              >下载附件</el-button
            >
            <div v-else-if="val.label === '操作'">
              <el-button
                @click="edit(scope.row)"
                type="primary"
                size="mini"
                v-hasPermi="['employee:contract:edit']"
                >修改</el-button
              >
              <el-button
                @click="del(scope.row)"
                type="danger"
                size="mini"
                v-hasPermi="['employee:contract:remove']"
                >删除</el-button
              >
            </div>
            <div v-else>{{ scope.row[val.prop] }}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" width="50">
          <template slot="header" slot-scope="scope">
            <el-popover placement="bottom-start" width="100" trigger="click">
              <el-checkbox-group v-model="checkedTableColumns">
                <div style="display: flex; flex-direction: column">
                  <el-checkbox
                    v-for="(item, index) in tableCols"
                    :key="item.prop"
                    :label="item.prop"
                    :disabled="item.disable"
                    >{{ item.label }}</el-checkbox
                  >
                </div>
              </el-checkbox-group>
              <i
                class="el-icon-s-tools"
                @click="clickReset"
                style="font-size: 25px"
                slot="reference"
              ></i>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="100"
        background=""
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <edit v-if="editData.open" :prop="editData" @close="closeEdit"></edit>
    <!-- <detail v-if="detailOpen" :prop="detailData" @close="closeDetail"></detail> -->
    <downloadfile v-if="downloadData.open" :prop="downloadData"></downloadfile>
  </div>
</template>

<script>
import {
  getPageList,
  del,
} from "@/api/employee/employeeContract/employeeContract.js";
import { download } from "@/api/file/file.js";
import edit from "@/views/employee/contract/edit.vue";
import detail from "@/views/employee/employee/detail.vue";
import downloadfile from "@/views/components/DownloadAllFile/downloadFile.vue";
export default {
  name: "EmployeeIndex",
  dicts: ["contract_type"],
  components: { edit, detail, downloadfile },
  props: {},
  data() {
    return {
      queryParams: {
        employeeCode: null,
        employeeName: null,
        employeeTel: null,
        employeeContractStamp: "1",
        employeeContractReceive: null,
        isEnable: "0",
        size: 10,
        current: 1,
      },
      total: 0,
      execution: 0,
      waitStamp: 0,
      waitReceive: 0,
      willExpired: 0,
      expired: 0,
      tableData: [],
      activeName: "execution",
      reset: false,
      tableCols: [
        { prop: "employeeName", label: "姓名", show: true, disable: false },
        {
          prop: "employeeContractTypeName",
          label: "合同类型",
          sortable: true,
          show: true,
          disable: false,
        },
        {
          prop: "employeeContractCode",
          label: "合同/协议编号",
          sortable: true,
          show: true,
          disable: false,
          width: 160,
        },
        {
          prop: "employeeContractName",
          label: "合同/协议标题",
          show: true,
          disable: false,
          width: 160,
        },
        {
          prop: "employeeContractTerm",
          label: "期限",
          sortable: true,
          show: true,
          disable: false,
        },
        {
          prop: "employeeContractSignTime",
          label: "签订日期",
          sortable: true,
          show: true,
          disable: false,
        },
        {
          prop: "employeeContractStartTime",
          label: "开始日期",
          sortable: true,
          show: true,
          disable: false,
        },
        {
          prop: "employeeContractEndTime",
          label: "结束日期",
          sortable: true,
          show: true,
          disable: false,
        },
        {
          prop: "employeeContractStamp",
          label: "盖章情况",
          sortable: true,
          show: true,
          disable: false,
        },
        { prop: "file", label: "附件", show: true, disable: false },
        {
          prop: "employeeContractReceive",
          label: "领取状态",
          sortable: true,
          show: true,
          disable: false,
        },
        {
          prop: "operator",
          label: "操作",
          show: true,
          disable: true,
          width: 200,
        },
      ],
      current: 1, //当前页码
      total: 10, //总数量
      size: 10, //每页显示数量
      // pageSizes: [10, 20, 50, 100],
      searchValue: "",
      editOpen: false,
      editData: {
        open: false,
        title: "新增合同/协议",
        id: null,
      },
      downloadData: {
        open: false,
        title: "下载附件",
        id: null,
        typeId: null,
      },
      detailOpen: false,
      detailData: {
        id: null,
      },
    };
  },
  computed: {
    bindTableColumns() {
      return this.tableCols.filter((column) => column.show);
    },
    checkedTableColumns: {
      get() {
        return this.bindTableColumns.map((column) => column.prop);
      },
      set(checked) {
        this.tableCols.forEach((col) => {
          if (checked.includes(col.prop)) {
            col.show = true;
          } else {
            col.show = false;
          }
        });
      },
    },
  },
  methods: {
    resetQuery() {
      this.queryParams = {
        employeeCode: null,
        employeeName: null,
        employeeTel: null,
        employeeContractStamp: null,
        employeeContractReceive: null,
        isEnable: "0",
        size: 10,
        current: 1,
      };
      this.getPageList();
    },
    handleClick(tab, event) {
      let name = tab.name;
      switch (name) {
        case "execution":
          this.queryParams.employeeContractReceive = null;
          this.queryParams.willExpired = null;
          this.queryParams.employeeContractStamp = "1";
          this.queryParams.isEnable = "0";
          break;
        case "waitStamp":
          this.queryParams.employeeContractReceive = null;
          this.queryParams.willExpired = null;
          this.queryParams.isEnable = null;
          this.queryParams.employeeContractStamp = "0";
          break;
        case "waitReceive":
          this.queryParams.isEnable = null;
          this.queryParams.willExpired = null;
          this.queryParams.employeeContractStamp = null;
          this.queryParams.employeeContractReceive = "0";
          break;
        case "willExpired":
          this.queryParams.employeeContractReceive = null;
          this.queryParams.employeeContractStamp = "1";
          this.queryParams.isEnable = "0";
          this.queryParams.willExpired = "yes";
          break;
        case "expired":
          this.queryParams.employeeContractStamp = null;
          this.queryParams.willExpired = null;
          this.queryParams.employeeContractReceive = null;
          this.queryParams.isEnable = "1";
          break;
        default:
          this.queryParams.employeeContractReceive = null;
          this.queryParams.willExpired = null;
          this.queryParams.employeeContractStamp = "1";
          this.queryParams.isEnable = "0";
          break;
      }
      this.getPageList();
    },
    clickReset() {
      this.reset = !this.reset;
    },
    // 查询员工列表
    getPageList() {
      getPageList(this.queryParams)
        .then((res) => {
          if (res.code == 200) {
            this.tableData = res.data.page.records;
            this.execution = res.data.execution;
            this.waitStamp = res.data.waitStamp;
            this.waitReceive = res.data.waitReceive;
            this.willExpired = res.data.willExpired;
            this.expired = res.data.expired;
            let that = this;
            this.tableData.forEach((item) => {
              item.isEnable = item.isEnable === "0" ? "已到期" : "执行中";
              item.employeeContractStamp =
                item.employeeContractStamp === "0" ? "未盖章" : "已盖章";
              item.employeeContractReceive =
                item.employeeContractReceive === "0" ? "未领取" : "已领取";
              item.employeeContractTerm =
                item.employeeContractTerm + item.employeeContractTermUnitName;
              item.employeeContractTypeName = that.getContractType(item);
            });
            this.total = res.data.page.total;
          }
        })
        .catch((err) => {
          console.log("加载员工合同列表数据失败，原因：", err);
        });
    },
    getContractType(contract) {
      console.log(this.dict.type.contract_type);
      let numType = Number.parseInt(contract.employeeContractType);
      let type = this.dict.type.contract_type.find(
        (item) => item.raw.dictCode === numType
      );
      return type.raw.dictLabel;
    },
    // 切换页码
    handleSizeChange(val) {
      this.queryParams.size = val;
      this.getPageList();
    },
    // 翻页
    handleCurrentChange(val) {
      this.queryParams.current = val;
      this.getPageList();
    },
    // 点击 搜索按钮
    searchMethod() {
      this.getPageList();
    },
    // 点击 添加员工按钮
    add() {
      this.editData.open = true;
      this.editData.title = "新增合同/协议";
    },
    edit(row) {
      this.editData.open = true;
      this.editData.id = row.employeeContractId;
      this.editData.title = "修改合同/协议";
    },
    closeEdit() {
      this.editData.open = false;
      this.editData.id = null;
      this.editData.title = "新增合同/协议";
      this.getPageList();
    },
    /** 删除按钮操作 */
    del(row) {
      this.$confirm("是否删除合同及其相关信息？", "确认信息", {
        distinguishCancelAndClose: true,
        confirmButtonText: "确认",
        cancelButtonText: "取消",
      })
        .then(() => {
          del({ employeeContractId: row.employeeContractId }).then((res) => {
            this.$message({
              type: "success",
              message: "删除成功",
            });
            this.getPageList();
          });
        })
        .catch((action) => {});
    },
    downloadAllFiles(id, typeId) {
      this.downloadData = {
        open: true,
        title: "下载附件",
        id: id,
        typeId: typeId,
      };
    },
    closeDetail() {
      this.detailOpen = false;
      this.detailData.id = null;
    },
  },
  mounted() {
    this.getPageList();
  },
  updated() {},
};
</script>
<style  scoped>
.select {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* .query-form{
  position: relative;
  top: 4vh;
  left: 31vw;
  z-index: 5;
  width: 57vw;
  height: 4vh;
  } */
.tab-label-container {
  display: flex;
  flex-direction: column;
}
.tab-label-title {
  text-align: center;
  line-height: 1;
  height: 18px;
}
.tab-label-num {
  text-align: center;
  line-height: 1;
  height: 18px;
}
.el-pagination {
  margin-top: 20px;
  float: right;
}
</style>
